<template>
  <div>
        <h2>修改学生</h2>
        <table>
            <tr>
                <td>姓名:</td>
                <td><input type="text" v-model="student.name"></td>
                <td rowspan="7">
                    <img :src="student.imagePath" alt="">
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" v-model="student.age"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" value="男" v-model="student.gender">男
                    <input type="radio" name="sex" value="女" v-model="student.gender">女
                </td>
            </tr>
            <tr>
                <td>专业:</td>
                <td>
                    <select v-model="student.subjectsId">
                        <option v-for="item in subjects" :key="item._id" :value="item._id">{{item.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>班级:</td>
                <td>
                    <select v-model="student.classesId">
                        <option v-for="item in classes" :key="item._id" :value="item._id">{{item.name}}</option>
                    </select>
                </td>
            </tr>
            <!-- <tr>
                <td>头像:</td>
                <td>
                    <input type="file" ref="avatarElement" @change="uploadAvatarApi">
                </td>
            </tr> -->
            <tr>
                <td colspan="2">
                    <button class="createBtn" @click="updateStudentApi">修改</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    props:{
        student:Object
    },
    data(){
        return{
            subjects:[],
            classes:[],
            avatarUrl:''
        }
    },
    methods:{
        async updateStudentApi(){
            console.log(this.student);
            // const {data:{code,message}}=await axios({
            //     method:'PUT',
            //     url:'http://47.98.128.191:3000/students/updateStudents',
            //     data:this.student
            // })
           const {data:{code,message}}=await axios.put('http://47.98.128.191:3000/students/updateStudents',this.student)
            if(code){
                alert(message)
            }
        }
    },
    mounted(){
        console.log('***********执行moutned**************');
        let subjects=JSON.parse(localStorage.getItem('subjects'))
        let classes=JSON.parse(localStorage.getItem('classes'))
        this.subjects=subjects;
        this.classes=classes
        //this.avatarUrl=localStorage.getItem('avatar')
        //console.log('aa',localStorage.getItem('avatar'));
    },
    watch:{
        async "student.subjectsId"(newval){
         const {data:{data:{rows}}}=await axios.get('http://47.98.128.191:3000/classes/getClassesBySubjectsId',{params:{subjectsId:newval}})
         this.classes=rows
       } 
    }
}
</script>

<style>

</style>